<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户维护</title>
    <script src="${pageContext.request.contextPath}/resources/js/jquery-1.7.2.js"></script>
</head>
<body>
<input id="file" type="file">
<button id="uploadBtn">上传</button>
<div id="imageBox">

</div>
<script>
    $("#uploadBtn").click(function () {
        console.log("文件上传");
        // 获取文件
        var files = $("#file").prop("files");
        if (files.length == 0) {
            alert("请选择文件");
            return;
        }
        var file = $("#file").prop("files")[0];
        // 进行文件上传的操作
        var formData = new FormData();
        formData.append("file", file);
        $.ajax({
            url: "${pageContext.request.contextPath}/user/upload/avatar",
            type: "POST",
            data: formData,
            // 告诉jQuery不要去设置Content-Type请求头
            contentType: false,
            // 告诉jQuery不要去处理发送的数据
            processData: false,
            success(res) {
                console.log(res);
                $("#imageBox").append(`
                    <div>
                        <img src=" `+ res.data + `"/>
                    </div>`
                )
            }
        });
    });
</script>
</body>
</html>
